<template>
  <div class="box_title_box flex-x-center">
    <div class="label" />
    <span>{{ title }}</span>
    <div class="flex-1 desc1" />
    <div class="flex-1 desc2" />
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, default: "" },
  },
};
</script>

<style lang="scss" scoped>
.box_title_box {
  box-sizing: border-box;
  height: 4vh;
  padding: 0 1vw;
  font-size: 0.8vw;
  font-family:
    Alimama ShuHeiTi-Bold,
    Alimama ShuHeiTi;
  font-weight: bold;
  color: #ffffff;
  line-height: 1;

  .label {
    width: 0.2vw;
    height: 1.5vh;
    background: #2ec8ed;
    border-radius: 0px 0px 0px 0px;
    margin-right: 0.3vw;
  }
  .flex-1 {
    margin-left: 0.5vw;
  }

  .desc1 {
    background-image: url("@/assets/icons/img_title_decoration.png");
    height: 1.6vh;
    background-size: 100% 100%;
  }
  .desc2 {
    background-image: url("@/assets/icons/img_title_decoration2.png");
    height: 1.6vh;
    background-size: 100% 100%;
  }
}
</style>
